<template>
  <div id="app" class="w-screen h-screen">

    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <router-link to="/test">test</router-link>
    </nav>
    <canvas id="myCanvas" width="1500" height="720"  style="background-color: rgb(24, 25, 25)">unsupport Canvas</canvas>
    <div id="back"></div>
    <router-view/>
   
  </div>
  
</template>
<script>
import {
  createPoint,
  clearCanvas,
  calcNext,
  drawLine,
  dpdl} from './particleScript'
export default {
 mounted:()=>{
 
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#ffffff";
ctx.strokeStyle='white';
ctx.lineWidth=1;

var Width = window.innerWidth//浏览器窗口的内部宽度（包括滚动条）
  || document.documentElement.clientWidth
  || document.body.clientWidth;
  var Height = window.innerHeight//浏览器窗口的内部高度（包括滚动条）
  || document.documentElement.clientWidth
  || document.body.clientHeight; 
  canvas.height=Height;
  canvas.width=Width;

  var MouseX,MouseY;
  window.addEventListener("mousemove",function(event){
     MouseX =event.x;
     MouseY =event.y;
})
//产生一个数据点
//产生200个数据点
var pointArray=[];
var width = canvas.width;
var height =canvas.height;
for(var i = 0;i<200;i++){
  pointArray.push(createPoint(width,height));
  console.log("fin")
}

var fps=1000/60;
setInterval(function(){
  clearCanvas(ctx,canvas);
  calcNext(pointArray,canvas,width,height);
  dpdl(ctx,pointArray,MouseX,MouseY,drawLine);
},fps);

}
}
</script>
<style>
* {
  margin:0;
  padding:0;
}
body{
  overflow: hidden;
}
span.pixal{
  position:absolute;
  left:-5px;
  top:-5px;
  width:4px;
  background:white;
  border-radius:50%;
  height:4px;
}
#myCanvas{
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
}

</style>
